<template>
  <div>
    <!-- 标题 -->
    <van-cell title="搜做历史">
      <van-icon @click="isDel = true" v-if="!isDel" name="delete-o" />
      <template v-else>
        <span @click="$emit('clearHistory')">全部删除</span>
        <span @click="isDel = false" style="margin-left: 10px;">完成</span>
      </template>
    </van-cell>

    <!-- 历史记录 -->
    <van-cell @click="clickHistory(index, item)" :title="item" v-for="(item, index) in history" :key="item">
      <van-icon v-if="isDel" name="close" />
    </van-cell>

    <!-- 暂无搜索历史 -->
    <van-empty v-if="!history.length" image="error" description="暂无搜索历史" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      isDel: false // 是否处于删除的状态
    }
  },

  props: {
    // 接收父组件的搜索历史
    history: {
      type: Array,
      required: true
    }
  },

  created () {

  },

  methods: {
    // 点击了搜索历史
    clickHistory (index, item) {
      // 1. 什么时候去做这件事
      // 2. 做这件事情是否需要某些数据的支撑 需要 准备好数据
      // 3. 根据数据完成功能
      if (this.isDel) {
        // 处于删除 进行删除
        this.history.splice(index, 1)
      } else {
        // 未处于删除 进行搜索
        this.$emit('search', item)
      }
    }
  }
}
</script>

<style scoped lang='less'>
</style>
